<template>
  <div class="box">
    <!-- 左侧用户列表 -->
    <div class="leftBox">
      <ul>
        <li>
          <i class="el-icon-close"></i>
          <img class="userImg" />
          <div class="uitop">
            <div class="uiname">用户名字</div>
            <div class="uidate">03-11</div>
          </div>
          <div class="uibot">最新消息</div>
        </li>
      </ul>
    </div>

    <!-- 右侧聊天区域 -->
    <div class="rightBox">
      <div class="rbTop">
        <div class="rbt_left">
          <img class="userImg" />
          <div class="rbt_uitop">用户名字</div>
          <div class="rbt_uibot">好友</div>
        </div>
        <div class="rbt_right"></div>
      </div>

      <!-- 消息展示区域 -->
      <div class="infoShowBox">
        <div v-for="(message, index) in messages" :key="index" class="infoOne">
          <img class="ioImg" :class="message.sender === 'me' ? 'ioright' : 'ioleft'" />
          <div v-if="message.type === 'text'" class="ioInfo" :class="message.sender === 'me' ? 'ioright' : 'ioleft'">
            {{ message.content }}
          </div>
          <img
            v-else-if="message.type === 'image'"
            class="ioInfoImg"
            :class="message.sender === 'me' ? 'ioright' : 'ioleft'"
            :src="message.content"
            alt="图片"
          />
          <div class="isRead" :class="message.sender === 'me' ? 'ioright' : 'ioleft'">
            {{ message.read ? '已读' : '未读' }}
          </div>
        </div>
      </div>

      <!-- 消息编辑区域 -->
      <div class="infoEditBox">
        <div class="function">
          <input
            type="file"
            @change="handleImageUpload"
            accept="image/*"
            style="display: none"
            ref="fileInput"
          />
          <button @click="triggerFileInput">上传图片</button>
        </div>
        <div class="image-preview" v-if="imagePreviewUrl">
          <img :src="imagePreviewUrl" alt="Preview" />
          <button @click="removeImagePreview">删除</button>
        </div>
        <input
          type="text"
          placeholder="请输入消息..."
          v-model="inputText"
          class="infoText"
          @keyup.enter="sendMessage"
        />
        <input
          class="infoSend"
          type="button"
          value="发送"
          :disabled="isInputEmpty"
          :style="{
            backgroundColor: isInputEmpty ? '#7DACFA' : '#0075EB',
            color: isInputEmpty ? 'rgba(255, 255, 255, 0.6)' : '#fff',
          }"
          @click="sendMessage"
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Calendar",
  data() {
    return {
      inputText: "", // 输入框内容
      imagePreviewUrl: "", // 图片预览 URL
      messages: [], // 消息列表
    };
  },
  computed: {
    // 判断输入框是否为空
    isInputEmpty() {
      return this.inputText.trim() === "" && !this.imagePreviewUrl;
    },
  },
  methods: {
    // 触发文件选择
    triggerFileInput() {
      this.$refs.fileInput.click();
    },
    // 处理图片上传
    handleImageUpload(event) {
      const file = event.target.files[0];
      if (file && file.type.startsWith("image/")) {
        const reader = new FileReader();
        reader.onload = (e) => {
          this.imagePreviewUrl = e.target.result;
        };
        reader.readAsDataURL(file);
      }
    },
    // 删除图片预览
    removeImagePreview() {
      this.imagePreviewUrl = "";
    },
    // 发送消息
    sendMessage() {
      if (this.isInputEmpty) return;

      const newMessage = {
        sender: "me", // 发送者
        type: this.imagePreviewUrl ? "image" : "text", // 消息类型
        content: this.imagePreviewUrl || this.inputText, // 消息内容
        read: false, // 是否已读
      };

      this.messages.push(newMessage); // 添加到消息列表
      this.inputText = ""; // 清空输入框
      this.imagePreviewUrl = ""; // 清空图片预览
    },
  },
};
</script>

<style>
/* 样式部分 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.box {
  background-color: #f0f3fa;
  width: 100%;
  height: 100%;
  display: flex;
}

.leftBox {
  width: 210px;
  border-right: 1px solid #e7ebf1;
  overflow-y: auto;
}

.leftBox > ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.leftBox > ul > li {
  padding: 10px;
  cursor: pointer;
}

.leftBox > ul > li:hover {
  background-color: #dee2e9;
}

.userImg {
  width: 30px;
  height: 30px;
  background-color: #42b983;
  border-radius: 5px;
}

.rightBox {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.rbTop {
  padding: 10px;
  border-bottom: 1px solid #cecece;
}

.infoShowBox {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
}

.infoOne {
  margin-bottom: 10px;
  clear: both;
}

.ioImg {
  width: 30px;
  height: 30px;
  background-color: #42b983;
  border-radius: 5px;
  float: left;
  margin-right: 10px;
}

.ioInfo {
  max-width: 400px;
  padding: 10px;
  background-color: #fff;
  border-radius: 5px;
  float: left;
  word-wrap: break-word;
}

.ioInfoImg {
  max-width: 150px;
  border-radius: 5px;
  float: left;
}

.ioright {
  float: right;
}

.ioleft {
  float: left;
}

.isRead {
  font-size: 12px;
  color: #a8a8a8;
  clear: both;
}

.infoEditBox {
  border-top: 1px solid #cecece;
  padding: 10px;
}

.function {
  margin-bottom: 10px;
}

.infoText {
  width: 100%;
  height: 60px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  resize: none;
}

.infoSend {
  margin-top: 10px;
  padding: 10px 20px;
  background-color: #0075eb;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.infoSend:disabled {
  background-color: #7dacfa;
  cursor: not-allowed;
}

.image-preview {
  margin-bottom: 10px;
}

.image-preview img {
  max-width: 100px;
  max-height: 100px;
  border-radius: 5px;
}
</style>
